package com.example.composemodifiterdemo

import android.content.ContentValues.TAG
import android.os.Build.VERSION.SDK_INT
import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.CircularProgressIndicator
import androidx.compose.material.Slider
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.BlurredEdgeTreatment
import androidx.compose.ui.draw.blur
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import coil.ComponentRegistry
import coil.ImageLoader
import coil.compose.*
import coil.decode.GifDecoder
import coil.decode.ImageDecoderDecoder
import coil.decode.SvgDecoder
import coil.request.ImageRequest
import coil.transform.CircleCropTransformation
import coil.transform.RoundedCornersTransformation
import com.skydoves.cloudy.Cloudy
import com.skydoves.landscapist.ImageOptions
import com.skydoves.landscapist.coil.CoilImage

/**
 *@author: njb
 *@date:  2023/3/15 17:56
 *@desc:
 */

class ColiSampleActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            //AsyncImageDemo()
             //SubComposeAsyncImageDemo()
             AsyncImagePainterDemo()
            //circleImageDemo()
           // clipImageDemo()
            //coliLoadGifDemo()
            //CoilSvgDemo()
            // CoilImageSVGDemo()
            //loadBlurSample()
           // BlurCloudyLibSample()
        }
    }
}

@Preview
@Composable
fun AsyncImageDemo() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        AsyncImage(
            model = ImageRequest.Builder(LocalContext.current)
                .data(ImageUrl.testUrl1)
                .crossfade(true)
                .build(),
            contentDescription = "compose",
            placeholder = painterResource(id = R.mipmap.place_holder),
            error = painterResource(id = R.mipmap.place_holder),
            onSuccess = {
                Log.d(TAG, "success")
            },
            modifier = Modifier
                .fillMaxWidth()
                .height(500.dp)
        )
        Text(text = "加载网络图片")
    }
}

@Preview
@Composable
fun circleImageDemo() {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(
            modifier = Modifier
                .fillMaxWidth()
                .height(500.dp),
            painter = rememberImagePainter(
                data = ImageUrl.testUrl1,
                builder = {
                    placeholder(R.mipmap.avatar)
                    crossfade(true)
                    transformations(CircleCropTransformation())//圆形图片
                }),
            contentDescription = "composeCircleDemo"
        )
        Spacer(modifier = Modifier.width(10.dp))
        Text(text = "圆形图片示例")
    }
}

@Preview
@Composable
fun clipImageDemo() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Image(
            modifier = Modifier
                .fillMaxWidth()
                .padding(20.dp)
                .height(400.dp),
            painter = rememberImagePainter(
                data = ImageUrl.testUrl1,
                builder = {
                    placeholder(R.mipmap.avatar)
                    crossfade(true)
                    transformations(RoundedCornersTransformation(30f, 30f, 30f, 30f))
                }),
            contentDescription = "composeClipDemo"
        )
        Text(text = "加载圆角图片")
    }
}

@Preview
@Composable
fun coliLoadGifDemo() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        //自己构建图片加载器
        val imageLoader = ImageLoader.Builder(LocalContext.current)
            .components(fun ComponentRegistry.Builder.() {
                if (SDK_INT >= 28) {
                    add(ImageDecoderDecoder.Factory())
                } else {
                    add(GifDecoder.Factory())
                }
            }).build()
        Image(
            modifier = Modifier
                .fillMaxWidth()
                .height(400.dp)
                .padding(20.dp),
            painter = rememberImagePainter(
                data = ImageUrl.testGif,
                imageLoader = imageLoader,
                builder = {
                    placeholder(R.mipmap.avatar)//占位图
                    crossfade(true)//淡出效果
                }),
            contentDescription = null
        )
        Text(text = "加载gif图片")
    }
}


@Preview
@Composable
fun SubComposeAsyncImageDemo() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        SubcomposeAsyncImage(
            model = ImageRequest
                .Builder(LocalContext.current)
                .data(ImageUrl.testUrl2)
                .build(),
            contentDescription = "composeAsyncDemo",
            modifier = Modifier
                .fillMaxWidth()
                .height(500.dp)
        ) {
            if (painter.state is AsyncImagePainter.State.Loading || painter.state is AsyncImagePainter.State.Error) {
                CircularProgressIndicator()
            } else {
                SubcomposeAsyncImageContent()
            }
        }
        Text(text = "异步加载图片")
    }
}


@Preview
@Composable
fun AsyncImagePainterDemo() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        SubcomposeAsyncImage(
            model = ImageUrl.testUrl2,
            loading = { CircularProgressIndicator() },
            contentDescription = null,
            modifier = Modifier.size(200.dp, 600.dp)
        )
        SubcomposeAsyncImage(
            model = ImageUrl.testUrl2,
            contentDescription = null,
            modifier = Modifier.size(200.dp)
        ) {
            val state = painter.state
            when (state) {
                is AsyncImagePainter.State.Loading -> CircularProgressIndicator()
                is AsyncImagePainter.State.Error -> Text("${state.result.throwable}")
                is AsyncImagePainter.State.Success -> SubcomposeAsyncImageContent()
                is AsyncImagePainter.State.Empty -> Text("Empty")
            }
        }
        Text(text = "网络加载进度和状态")
    }
}

@Preview
@Composable
fun CoilSvgDemo() {
    //coli加载svg图片,这里的图片格式是由svg转换后，虽然后缀不少.svg
    val context = LocalContext.current
    val imageLoader = ImageLoader.Builder(context)
        .components { add(SvgDecoder.Factory()) }
        .crossfade(true)
        .build()
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Image(
            painter = rememberAsyncImagePainter(
                ImageUrl.svgUrl2,
                imageLoader = imageLoader,
            ),
            contentDescription = null,
            modifier = Modifier
                .fillMaxWidth()
                .height(400.dp)
                .padding(20.dp)
        )
        Text(text = "coli加载svg格式图片")
    }
}

@Preview
@Composable
fun CoilImageSVGDemo() {
    // 加载网络svg
    val context = LocalContext.current
    val imageLoader = ImageLoader.Builder(context)
        .components { add(SvgDecoder.Factory()) }
        .build()
    var flag by remember { mutableStateOf(false) }
    val size by animateDpAsState(targetValue = if (flag) 600.dp else 300.dp)
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        CoilImage(
            imageModel = { ImageUrl.svgUrl2 },
            imageOptions = ImageOptions(
                contentScale = ContentScale.Crop,
                alignment = Alignment.Center
            ),
            modifier = Modifier
                .size(size)
                .padding(10.dp)
                .clickable(
                    onClick = { flag = !flag },
                    indication = null,
                    interactionSource = MutableInteractionSource()
                ),
            imageLoader = { imageLoader }
        )
        Text(text = "加载svg图片")
    }
}

@Preview(showBackground = true)
@Composable
fun loadBlurSample() {
    Column(
        Modifier.padding(15.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        var progress by remember { mutableStateOf(0f) }
        val radius by animateDpAsState(targetValue = (progress * 10f).dp)
        Text(
            text = "高斯模糊效果示例",
            Modifier.blur(
                radius = radius,
                edgeTreatment = BlurredEdgeTreatment.Unbounded
            ),
            fontSize = 20.sp
        )
        Image(
            painter = painterResource(id = R.mipmap.test_iage),
            contentDescription = null,
            modifier = Modifier
                .height(400.dp)
                .fillMaxWidth()
                .blur(
                    radius = radius,
                    edgeTreatment = BlurredEdgeTreatment.Unbounded
                ),
        )
        Slider(
            value = progress,
            onValueChange = { progress = it },
        )
    }
}

@Preview
@Composable
fun BlurCloudyLibSample() {
    Column(
        Modifier.padding(15.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        var radius by remember { mutableStateOf(0) }
        // 模糊度支持范围是[0..25]
        Cloudy(radius = radius) {
            Column {
                AsyncImage(
                    model = ImageUrl.svgUrl2,
                    contentDescription = null,
                    onSuccess = { radius = 1 },
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(400.dp)
                )
            }
        }
        Text(text = "高斯模糊渐变效果测试", fontSize = 20.sp)
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceEvenly,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Button(onClick = { if (radius > 0) radius-- }) { Text(text = "模糊度减") }
            Text(text = "模糊度设置: $radius", fontSize = 20.sp)
            Button(onClick = { if (radius < 25) radius++ }) { Text(text = "模糊度加") }
        }
    }
}

class ImageUrl {
    companion object {
        val url: String by lazy {
            "https://qcloudimg-moss.cp47.ott.cibntv.net/data_center/files/2022/10/26/67a66d35-3f7c-4de8-9dfe-c706e42f44f2.jpg"
        }
        var urlTest: String =
            "https://pic-go-bed.oss-cn-beijing.aliyuncs.com/img/20220316151929.png"
        var svgUrl: String =
            "https://developer.android.google.cn/static/images/jetpack/compose/animation-flowchart.svg"
        var svgUrl2 = "https://photo.16pic.com/00/76/45/16pic_7645957_b.png"
        var svgUrl3 = "https://photo.16pic.com/00/64/28/16pic_6428912_b.png"
        var svgUrl4 =
            "https://img0.baidu.com/it/u=480894149,21356393&fm=253&fmt=auto&app=138&f=JPEG?w=786&h=500"
        var svgUrl5 =
            "https://img1.baidu.com/it/u=4053028698,2643070273&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=500"
        var testUrl =
            "https://img0.baidu.com/it/u=450558320,2864057328&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
        var testUrl1 = "https://image5.cnpp.cn/upload/images/20171114/11542556845_840x560.jpg"
        var testUrl2 =
            "https://img2.baidu.com/it/u=3107178066,1951512797&fm=253&fmt=auto&app=138&f=JPEG?w=704&h=500"
        var testGif = "https://img-blog.csdnimg.cn/b286b49591dc4bbd8578300a6e6cfb8e.gif#pic_center"
    }
}